<template>
 <div class="unitbox">
        <div>
 <span class="number">抽油机编号：{{id}}</span>
<span class="words">抽油机状态</span> 
<img src= '@/assets/正常.png' alt="" class="img" v-if="!unitStatus"> 
<img src= '@/assets/故障信息.png' alt="" class="img" v-if="unitStatus"> 
 <div class="statusbox">
        <span class="status">{{unitStatus==0?'设备上线':'设备下线'}}</span></div>
</div>
 </div>
</template>

<script setup lang="ts">
defineProps(['id','unitStatus'])


</script>

<style scoped> 
.unitbox{
        background-image: url('@/assets/unit.png');
        background-position: left;
        background-repeat: no-repeat;
        background-size:150px ;
        width: 330px;
        height: 250px;
        border: gray solid 2px;
        border-radius: 5%;
        margin: 20px;
        box-shadow: 0 0 5px 1px #999 ;
        cursor: pointer;
        display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.unitbox:hover{
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.number{
        position: relative;
        top: 165px;
        left: 25px
}
.words{
        font-size: 25px;
        font-weight: 500;
        position: relative;
        top: 15px;
        left: 45px;
}
.img{
        width: 50px;
        position: relative;
        top: 95px;
        right: 45px;
}
.status{
        width: 100px;
        font-size: 30px;
        font-weight: 600;
        position: relative;
        left: 160px;
        top:175px ;
}
.statusbox{
        position: relative;
        bottom: 58px ;
        left: 10px;
}
</style>
